<template>
    <div class="collect">
        <van-nav-bar left-text="我的收藏" right-text="..." left-arrow @click-left="$router.go(-1)" />
        <div class="shoplist">
            <div @click="toDetail(item)" class="shop" v-for="(item, index) in collectlist" :key="index">
                <div class="imgbox">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="text">
                    <div class="name">{{ item.name || item.shopName }}</div>
                    <div class="sale"> ☆ {{ item.wmPoiScore }} {{ item.monthSalesTip }}</div>
                    <div class="desc">{{ item.minPriceTip }} {{ item.shippingFeeTip }}</div>
                </div>
            </div>
            <div v-if="collectlist.length == 0" class="empty">
                未收藏任何店铺,<span @click="$router.push('/index/home')">去逛逛</span>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    computed: {
        ...mapState(['collectlist'])
    },
    methods: {
        toDetail(item){ 
            this.$router.push('/detail/'+item.mtWmPoiId);
        }
    },
};
</script>

<style lang="scss" scoped>
.shoplist{
  margin: 10px;
  .shop{
    display: flex;
    margin: 10px 0;
    .imgbox{
      width: 80px;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    .text{
      font-size: 12px;
    }
  }

  .empty{
    text-align: center;
    padding: 50px 0;
    span{
        color: #0185ff;
    }
  }
}
</style>